<template>
	<view class="container">
		<view class="logo-container">
			<image class="logo" src="/static/logo/CBB-LOGO-1.png" mode="aspectFit"></image>
		</view>
		<!-- 医院名称 -->
		<view class="hospital-header">
			<text class="hospital-name">“宠宝贝”宠物医院</text>
		</view>
		<view class="login-form">
			<view class="form-item">
				<text class="label">用户名：</text>
				<input class="input" placeholder="请输入用户名" v-model="loginForm.username" />
			</view>
			<view class="form-item">
				<text class="label">密码：</text>
				<input class="input" type="password" placeholder="请输入密码" v-model="loginForm.password" />
			</view>
			<button class="login-btn" @click="handleLogin">
				登录
			</button>
			<button class="register-btn" @click="handleRegister">
				注册
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	// 登录表单数据
	const loginForm = reactive({
		isShowPassword: false,
		tenantName: '平台',
		username: '',
		password: '',
		rememberMe: true // 默认记录我。如果不需要，可手动修改
	});

	// 登录逻辑
	const handleLogin = () => {
		// 验证用户名是否为空
		if (!loginForm.username) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'none',
			});
			return;
		}

		// 验证密码是否为空
		if (!loginForm.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
			});
			return;
		}

		// 调用登录接口
		uni.request({
			url: 'http://localhost:58080/admin-api/system/auth/login', // 登录接口地址
			method: 'POST',
			data: {
				username: loginForm.username,
				password: loginForm.password,
			},
			header: {
				'Content-Type': 'application/json', // 设置请求头
			},
			success: (res) => {
				console.log(res)
				if (res.data.code === 0) {
					// 登录成功
					uni.showToast({
						title: '登录成功',
						icon: 'success',
					});
					// 将用户信息存储到本地
					uni.setStorageSync('userInfo', res.data.data);
					// 延迟跳转到首页或其他页面
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index',
						});
					}, 1000);
				} else {
					// 登录失败
					uni.showToast({
						title: res.data.msg || '登录失败',
						icon: 'none',
					});
				}
			},
			fail: (err) => {
				// 请求失败
				uni.showToast({
					title: '网络请求失败',
					icon: 'none',
				});
				console.error(err);
			},
		});
	};

	// 注册逻辑
	const handleRegister = () => {
		// 跳转到注册界面
		uni.navigateTo({
			url: '/pages/register/register',
		});
	};
</script>

<style scoped>
	
	/* logo 图片样式 */
	.logo-container {
	  display: flex;
	  justify-content: center;
	  margin-bottom: 15px;
	}
	
	.logo {
	  width: 120px;
	  height: 120px;
	  border-radius: 10px;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	  transition: transform 0.3s ease;
	}
	
	.logo:hover {
	  transform: scale(1.05);
	}
	
	/* 医院名称样式 */
	.hospital-header {
	  margin-bottom: 20px;
	  padding-bottom: 10px;
	  border-bottom: 1px solid #eee;
	  text-align: center;
	}
	
	.hospital-name {
	  font-size: 24px;
	  color: #333;
	  font-weight: bold;
	  letter-spacing: 1px;
	  display: inline-block;
	  padding: 0 10px;
	  position: relative;
	}
	
	.hospital-name::after {
	  content: '';
	  position: absolute;
	  bottom: -5px;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 50px;
	  height: 3px;
	  background-color: #1aad19;
	  border-radius: 3px;
	}
	
	
	
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f5f5f5;
	}

	

	

	

	.login-form {
		width: 80%;
		background-color: #fff;
		padding: 30px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		display: block;
		margin-bottom: 8px;
		font-size: 16px;
		color: #333;
	}

	.input {
		width: 100%;
		height: 40px;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 0 10px;
		font-size: 14px;
	}

	.login-btn {
		width: 100%;
		height: 40px;
		background-color: #55aaff;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
	}

	.register-btn {
		width: 100%;
		height: 40px;
		background-color: #f5f5f5;
		border: 1px solid #ddd;
		border-radius: 5px;
		color: #666;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>